import axios from "axios";
import React, { useEffect, useState } from "react";
import style from "./style.less";
import { Table } from "antd";
import {
  usePlayerStoreDispatch,
  // 一个action
  setMusicId,
  pushPlayList,
} from "@/components/Player/store";


// 表格中展示的歌单信息，格式如下：
// const data = [
//   {
//     key: "1",
//     id: 24381616,
//     name: "John Brown",
//     singer: 32,
//     album: "New York No. 1 Lake Park",
//     time: “03：00,
//     playRouter: ["/play/123456", "John Brown"]
//   },
// ];


/**
 * 获取请求歌单URL
 * @param {*} id
 * @returns
 */
function getSingleList (id) {
  return `http://123.207.32.32:9001/playlist/detail?id=${id}`;
}

/**
 * 获取列表中需要的歌曲信息
 * @param {*} tracks
 * @returns list: 列表中要渲染的数据
 */
function getListInfo (tracks) {
  const list = [];

  let key = 0;
  tracks.forEach((item) => {
    const song = {};
    song.key = ++key;
    song.id = item.id;
    song.name = item.name;
    song.album = item.al.name;
    song.singer = item.ar[0].name;
    song.duration = item.dt;
    song.maskPic = item.al.picUrl;
    song.time = convertSongTime(item.dt);

    list.push(song);
  });

  return list;
}

// 歌曲时长转换为 分:秒格式，比如 03:45
function convertSongTime (time) {
  time = time / 1000; // 毫秒转为秒
  let totalMinute = time / 60; // 计算为分钟数

  let min = Math.floor(totalMinute);
  let second = parseInt((totalMinute - min) * 60).toString();

  if (second.length === 1) second = "0" + second; // 秒数补0

  return `${min}:${second}`;
}

const SingleList = (props) => {
  let id = props.match.params.id; // 传入歌单id

  const [list, setList] = useState([]);
  const [tracks, setTracks] = useState([]);

  let data;

  const dispatch = usePlayerStoreDispatch();

  /**
 * 点击歌曲名称播放
 * @param {*} id
 */
  function changeCurrentMusic (record, dispatch) {
    console.log(id);
    // const dispatch = usePlayerStoreDispatch();
    dispatch(setMusicId(record.id));
    dispatch(pushPlayList(record));
  }

  const columns = [
    {
      title: "标题",
      dataIndex: "name",
      key: "name",
      ellipsis: true,
      render: (text, record) => {
        return (
          <div className={style.songName}
            onDoubleClick={() => {
              changeCurrentMusic(record, dispatch);
            }}
          >
            {text}
          </div>
        );
      },
    },
    {
      title: "歌手",
      dataIndex: "singer",
      key: "singer",
    },
    {
      title: "专辑",
      dataIndex: "album",
      key: "album",
      ellipsis: true,
    },
    {
      title: "时长",
      dataIndex: "time",
      key: "time",
    },
  ];

  // 获取歌单详情
  useEffect(async () => {
    // axios.defaults.withCredentials = true;
    const result = await axios.get(getSingleList(id));
    setList(result.data.playlist);
    setTracks(result.data.playlist.tracks);
  }, []);

  useEffect(() => {
    getListInfo(tracks);
  }, [tracks]);

  data = getListInfo(tracks);

  return (
    <div className={style.singleList}>
      <div className={style.singleListHeader}>
        <div className={style.singleListImg}>
          <img src={list.coverImgUrl} />
        </div>

        <div className={style.singleListInfo}>
          <div className={style.singleListTitle}>{list.name}</div>
          <div className={style.singleListDesc}>{list.description}</div>
        </div>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        className={style.singleListTable}
      />
    </div>
  );
};

export default SingleList;